---
title: Ripple Button
date: 2024-11-17
description: An animated button with ripple useful for user engagement.
author: nyxb
published: true
---

<ComponentPreview name="ripple-button-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add ripple-button
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ripple-button" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Update `tailwind.config.js`</Step>

Add the following animations to your `tailwind.config.js` file:

```js title="tailwind.config.js" {5-20}
/** @type {import('tailwindcss').Config} */
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        rippling: "rippling var(--duration) ease-out",
      },
      keyframes: {
        rippling: {
          "0%": {
            opacity: "1",
          },
          "100%": {
            transform: "scale(2)",
            opacity: "0",
          },
        },
      },
    },
  },
};
```

</Steps>

</TabsContent>

</Tabs>

## Props

| Prop          | Type              | Default | Description                                               |
| ------------- | ----------------- | ------- | --------------------------------------------------------- |
| `children`    | `React.ReactNode` | `-`     | The content of the button.                                |
| `className`   | `string`          | `-`     | Additional class names for the button.                    |
| `rippleColor` | `string`          | `-`     | The rbg numbers only for the color of the rippling waves. |
| `duration`    | `string`          | `-`     | The time span of one ripple.                              |
